import React, { useRef, useEffect, useState } from "react";

/*
  目标: useRef

  1 获取dom的对象
  2 获取组件的实例
    1 函数组件 不能直接使用 ref 会报错， 想要拿请你使用  React.forwardRef()
      1 以前 用类组件  身上可以直接 使用ref 
      2 原因是因为 类组件 有实例 this，ref 直接在this上去挂载  但是函数组件没有实例 没有自己状态
  3 难点！！保存不需要渲染的数据

  4 保存不需要渲染的数据
    1 useRef 和 useState 作对比 useState 本身也是可以做到 函数组件不销毁，数据不会丢失，函数组件更新，数据还在！！
    2 区别
      1 state往往要和视图更新 才用 
      2 代码规范就是
        1 如果你想要 在视图上看到数据更新 使用 useState
        2 如果你想要 组件不销毁，数据还在 但是视图用不到，使用 useRef

        3 全部都是使用state可不可以 。 性能浪费！！！ state的改变触发视图的重新render 

*/
export default function App() {
  console.log("num改变了，App函数重新执行 但是 num数据不会被重新创建");
  const [num, setNum] = useState(100);
  useEffect(() => {}, []);

  return (
    <>
      <div>
        <button onClick={() => setNum(num + 1)}>{num}</button>
      </div>
    </>
  );
}
